<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微圈热度排行统计</title>
    <link rel="stylesheet" href="/src/css/layui.css">
    <script src="/src/layui.js"></script>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/echarts/echarts.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #F1F1F1;
    }
    #box{
        width: 99%;
        margin: 0 auto;
    }
    .layui-elem-quote {
        height: 30px;
        line-height: 30px;
    }
    table {
        text-align: center;
        width: 100%;
        height: 200px;
        font-weight: bold;
        border: 1px solid #E5E7E9;
    }
</style>
<body>
<div id="box">
    <div class="layui-row">
        <div class="layui-row" >
            <div class="layui-elem-quote">
                <span style="font-size: 18px">微圈热度排行统计图</span>
                <div style="float: right">
                    <button class="layui-btn" onclick="Refresh()"><i class="layui-icon layui-icon-refresh"></i>刷新</button>
                    <button class="layui-btn" onclick="goBack()"><i class="layui-icon layui-icon-left"></i>返回</button>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <button class="layui-btn" id="clickcont">点击量</button>
        <button class="layui-btn" id="giveTheThumbsUpCount">点赞量</button>
        <button class="layui-btn" id="share">分享量</button>
        <button class="layui-btn" id="collectionCount">收藏量</button>
    </div>
    <div class="layui-row" style="margin-top: 5px">
        <h2 style="padding-left: 10px"><span class="layui-icon layui-icon-friends"></span> 微圈热度统计列表</h2>
    </div>
    <div class="layui-row">
        <table class="layui-table" id="tab">
            <tr id="title"></tr>
            <tr id="sum"></tr>
        </table>
    </div>
    <div class="layui-row">
        <h2 style="padding-left: 10px" class="layui-back"><span class="layui-icon layui-icon-chart-screen"></span>
            微圈热度统计图表</h2>
    </div>
    <div class="layui-row">
        <div id="main" style="width: 100%;height: 500px"></div>
    </div>
</div>
</body>
<script>
    layui.use(['table','jquery','layer','form'],function () {
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;

        Refresh = function Refresh() {
            location.reload();
        }

        //返回
        goBack = function goBack() {
            parent.$('#beforeHref').val($('.layui-elem-quote').children('span').eq(0).text());
            parent.before();
            return false;
        }
    });
    var myChar = echarts.init(document.getElementById('main'));
    function echart(type,count,name) {
        var option = {
            //标题
            title: {
                text: '微圈热度统计图',//主标题
                subtext: '思云产品'//副标题
            },
            //图例位置
            legend: {
                show: true
            },

            //右上角工具栏
            toolbox: {
                feature: {
                    dataView: { //数据视图
                        show: true
                    },
                    magicType: {//动态类型切换
                        type: ['line', 'bar']
                    },
                    restore: { //重置
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    }
                }
            },
            //提示框
            tooltip: {},
            //y轴
            yAxis: {
                type: 'value',
                position: 'left',
            },
            xAxis:{
                data:type
            },
            series: [
                {
                    //名称，提示框tooltip会显示
                    name: name,
                    //决定这的图表是什么类型的
                    type: 'bar',
                    data: count,
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' }
                        ]
                    }
                }
            ]
        }
        //使用指定的配置项和数据显示图表
        myChar.setOption(option);
    };
    //点赞量
    $('#giveTheThumbsUpCount').on('click',function () {
        $('#title').html('');
        $('#sum').html('');
        giveTheThumbsUpCount();
    })
    //收藏量
    $('#collectionCount').on('click',function () {
        $('#title').html('');
        $('#sum').html('');
        collectionCount();
    })
    //收藏量
    $('#share').on('click',function () {
        $('#title').html('');
        $('#sum').html('');
        share();
    })
    //点击量
    $('#clickcont').on('click',function () {
        $('#title').html('');
        $('#sum').html('');
        clickcont()
    })
    /*点赞量*/
    function giveTheThumbsUpCount() {
        $.ajax({
            url: '/microTree/getAllThumbsUpCount',
            type: 'post',
            dataType: 'json',
            success: function (data) {
                var type = new Array();
                var count = new Array();
                var lists = data.data;
                $('#title').append("<td>微圈类型</td>");
                $('#sum').append("<td>点赞次数</td>");
                for (var i = 0; i < 5; i++) {
                    $('#title').append("<td>" + lists[i].artcleCategroyName + "</td>");
                    $('#sum').append("<td>" + lists[i].acticleLike + "</td>");
                    count.push(lists[i].acticleLike);
                    type.push(lists[i].artcleCategroyName);
                }
                echart(type, count, '点赞量');
            }
        });
    };
    /*分享量*/
    function share() {
        $.ajax({
            url: '/microTree/getAllshare',
            type: 'post',
            dataType: 'json',
            success: function (data) {
                var type = new Array();
                var count = new Array();
                var lists = data.data;
                $('#title').append("<td>微圈类型</td>");
                $('#sum').append("<td>分享次数</td>");
                for (var i = 0; i < 5; i++) {
                    $('#title').append("<td>" + lists[i].artcleCategroyName + "</td>");
                    $('#sum').append("<td>" + lists[i].acticleShare + "</td>");
                    count.push(lists[i].acticleShare);
                    type.push(lists[i].artcleCategroyName);
                }
                echart(type, count, '分享量');
            }
        });
    };
    /*点击量*/
    clickcont();
    function clickcont() {
        $.ajax({
            url: '/microTree/getAllclickcont',
            type: 'post',
            dataType: 'json',
            success: function (data) {
                var type = new Array();
                var count = new Array();
                var lists = data.data;
                $('#title').append("<td>微圈类型</td>");
                $('#sum').append("<td>点赞次数</td>");
                for (var i = 0; i < 5; i++) {
                    $('#title').append("<td>" + lists[i].artcleCategroyName + "</td>");
                    $('#sum').append("<td>" + lists[i].acticleHits + "</td>");
                    count.push(lists[i].acticleHits);
                    type.push(lists[i].artcleCategroyName);
                }
                echart(type, count, '点击量');
            }
        });
    };
    /*收藏量*/
    function collectionCount() {
        $.ajax({
            url: '/microTree/getAllcollectionCount',
            type: 'post',
            dataType: 'json',
            success: function (data) {
                var type = new Array();
                var count = new Array();
                var lists = data.data;
                $('#title').append("<td>微圈类型</td>");
                $('#sum').append("<td>收藏次数</td>");
                for (var i = 0; i < 5; i++) {
                    $('#title').append("<td>" + lists[i].artcleCategroyName + "</td>");
                    $('#sum').append("<td>" + lists[i].collectionId + "</td>");
                    count.push(lists[i].collectionId);
                    type.push(lists[i].artcleCategroyName);
                }
                echart(type, count, '收藏量');
            }
        });
    };

</script>
</html>